<template>
    <Layout>
        <Form ref="form1" :model="form1" :label-width="120">
            <Row class="query-form">
                <Col span="8">
                    <FormItem label="二级集团：">
                        <two-level-org org-code class="query-form-el" v-model="form1.twoLevelOrgCode" />
                    </FormItem>
                </Col>
                <Col span="8">
                    <FormItem label="所属单位：">
                        <company-select v-model="form1.orgName" style="width:100%" />
                        <!-- <cascaderDom ref="childOrg" @setOrgInfo="setOrgId" @setOrgname="setOrgName"
                                     :rootOrgId="companyId"
                                     :orgTree="true"></cascaderDom> -->
                    </FormItem>
                </Col>
                <Col span="8" v-if="!switchFlag">
                    <Button @click="switchQuery(true)" class="ivu-btn-switch" type="text">展开∨</Button>
                    <Button @click="reset" class="ivu-btn-reset" style="margin-left: 2px">重置</Button>
                    <Button class="ivu-btn-query" icon="md-search" @click="query()">查询</Button>
                </Col>
                <Col span="8" v-else>
                    <FormItem label="相关方名称：">
                        <Input type="text" v-model="form1.contractorName"/>
                    </FormItem>
                </Col>
            </Row>
            <Row v-show="switchFlag" class="query-form">
                <Col span="8" offset="16">
                    <Button @click="switchQuery(false)" class="ivu-btn-switch" type="text">收起∧</Button>
                    <Button @click="reset" class="ivu-btn-reset">重置</Button>
                    <Button class="ivu-btn-query" icon="md-search" @click="query">查询</Button>
                </Col>
            </Row>
            <Row class="query-form">
                <Col span="24">
                    <Button size="large" class="ivu-btn-add" icon="md-add" @click="addInfo">新增</Button>
                    <download-button :api="exportUrl" :queryForm='form1' />
                </Col>
            </Row>
        </Form>
        <Table ref='table' :height="tableHeight" size="small" :loading="loading" class="table" no-data-text="没有查询到相关数据!"
               highlight-row stripe border :columns="columns1" width="100%" :data="dataTable">
        </Table>
        <Row style="margin-right:10px;">
            <Col span="24">
                <Page :total="pagedata.total" :page-size="pagedata.pageSize" @on-change="pageChange"
                      style="float: right" @on-page-size-change="pageSizeChange" :page-size-opts="pageSizeArray"
                      show-total show-sizer show-elevator/>
            </Col>
        </Row>

        <Modal :transfer=false v-model="model1" :width=981 :title="add?'相关方业绩评价新增':'相关方业绩评价修改'"
               @on-cancel="onCancel">
            <div>
                <Form style="margin-left: 10px" ref='InputData' :model="InputData" :rules="ruleCustom"
                      label-position="top">
                    <Row style="line-height: 28px;">
                        <Col span='11'>
                            <FormItem label='作业名称：' prop="serviceName">
                                <Input v-model="InputData.serviceName" readonly @on-focus="modelSearch=true"  suffix="ios-search"/>
                            </FormItem>
                        </Col>
                        <!--<Col span='5' offset="1">-->
                            <!--<FormItem label='相关方作业事项：' prop="workingMatters">-->
                                <!--<Input v-model="InputData.workingMatters" readonly @on-focus="modelSearch=true"  suffix="ios-search"/>-->
                            <!--</FormItem>-->
                        <!--</Col>-->
                        <Col span='5' offset="1">
                            <FormItem label='相关方名称：' prop="contractorName">
                                <Input v-model="InputData.contractorName" readonly />
                            </FormItem>
                        </Col>

                        <Col span='5' offset="1">
                            <FormItem label='联系人：' prop="contacts">
                                <Input v-model="InputData.contacts"/>
                            </FormItem>
                        </Col>
                        <Col span='5'>
                            <FormItem label='联系电话：' prop="phone">
                                <Input v-model="InputData.phone"/>
                            </FormItem>
                        </Col>
                        <Col span='5' offset="1">
                            <FormItem label='评价时间段：' prop="evaluationPeriodDate">
                                <Date-picker type="daterange" style="width: 100%" v-model="evaluationPeriodDate"/>
                            </FormItem>
                        </Col>

                        <!-- <Col span='5' offset="1">
                            <FormItem label='合同有效期：' prop="contractTermDate">
                                <Date-picker type="daterange" style="width: 100%" v-model="contractTermDate"/>
                            </FormItem>
                        </Col>

                        <Col span='5' offset="1">
                            <FormItem label='供方资质：' prop="supplierQualification">
                                <Input v-model="InputData.supplierQualification"/>
                            </FormItem>
                        </Col> -->

                        <Col span='5' offset="1">
                            <FormItem label='评价人：' prop="evaluator">
<!--                                <Select
                                        v-model="InputData.evaluator"
                                        label-in-value
                                        filterable
                                        @on-change="setEvaluatorId"
                                        :remote-method="remoteMethod1"
                                        :loading="loading1">
                                    <Option v-for="(option, index) in options1" :value="option.userId"
                                            :label="option.userName" :key="index">
                                        <span>{{option.userName}}</span>
                                        <span style="float:right;color:#ccc">{{option.orgInfo.orgName}}</span>
                                    </Option>
                                </Select>-->
                              <userDom ref="evaluator" :ifUser=true :singleChoice=true @setData="setUserInfo"
                                       :selectData='{name: InputData.userName}' :rootOrgName="domCompanyName"></userDom>
                            </FormItem>
                        </Col>

                        <Col span='5' offset="1">
                            <FormItem label='部门经理：' prop="departmentManagerUserId">
                              <!--                                <Select
                                        v-model="InputData.departmentManagerUserId"
                                        label-in-value
                                        filterable
                                        @on-change="setUserId1"
                                        :remote-method="remoteMethod1"
                                        :loading="loading1">
                                    <Option v-for="(option, index) in options1" :value="option.userId"
                                            :label="option.userName" :key="index">
                                        <span>{{option.userName}}</span>
                                        <span style="float:right;color:#ccc">{{option.orgInfo.orgName}}</span>
                                    </Option>
                                </Select>-->
                              <userDom ref="departmentManagerUserId" :ifUser=true :singleChoice=true
                                       @setData="setDepartmentManagerUser"
                                       :selectData='{name: InputData.departmentManagerUserName}'
                                       :rootOrgName="domCompanyName"></userDom>
                            </FormItem>
                        </Col>

                        <Col span='5'>
                            <FormItem label='主管经理：' prop="executiveManagerUserId">
                              <!--                                <Select
                                        v-model="InputData.executiveManagerUserId"
                                        label-in-value
                                        filterable
                                        @on-change="setUserId2"
                                        :remote-method="remoteMethod1"
                                        :loading="loading1">
                                    <Option v-for="(option, index) in options1" :value="option.userId"
                                            :label="option.userName" :key="index">
                                        <span>{{option.userName}}</span>
                                        <span style="float:right;color:#ccc">{{option.orgInfo.orgName}}</span>
                                    </Option>
                                </Select>-->
                              <userDom ref="executiveManagerUserId" :ifUser=true :singleChoice=true
                                       @setData="setExecutiveManagerUser"
                                       :selectData='{name: InputData.executiveManagerUserName}'
                                       :rootOrgName="domCompanyName"></userDom>
                            </FormItem>
                        </Col>

                        <Col span='5' offset="1">
                            <FormItem label='公司经理：' prop="companyManagerUserId">
                              <!--                                <Select
                                        v-model="InputData.companyManagerUserId"
                                        label-in-value
                                        filterable
                                        @on-change="setUserId3"
                                        :remote-method="remoteMethod1"
                                        :loading="loading1">
                                    <Option v-for="(option, index) in options1" :value="option.userId"
                                            :label="option.userName" :key="index">
                                        <span>{{option.userName}}</span>
                                        <span style="float:right;color:#ccc">{{option.orgInfo.orgName}}</span>
                                    </Option>
                                </Select>-->
                              <userDom ref="companyManagerUserId" :ifUser=true :singleChoice=true
                                       @setData="setCompanyManagerUser"
                                       :selectData='{name: InputData.companyManagerUserName}'
                                       :rootOrgName="domCompanyName"></userDom>
                            </FormItem>
                        </Col>
                        <Col span='5' offset="1">
                            <FormItem label='评价等级：' prop="evaluationGrade">
                                <Select v-model='InputData.evaluationGrade' class='query-form-el' placeholder="请选择评价等级">
                                    <Option value="优秀">优秀</Option>
                                    <Option value="良好">良好</Option>
                                    <Option value="及格">及格</Option>
                                    <Option value="不及格">不及格</Option>
                                </Select>
                            </FormItem>
                        </Col>
                        <Col span='23'>
                            <FormItem label='综合评价：' prop="comprehensiveEvaluation">
                                <Input v-model="InputData.comprehensiveEvaluation" type="textarea" :rows="5"
                                       :autosize="{maxRows:5,minRows: 2}"/>
                            </FormItem>
                        </Col>
                        <Col span="23">
                            <FormItem label="协议附件：">
                                <div>
                                    <Upload ref="upload"
                                            :before-upload="beforeUpload"
                                            :show-upload-list="true"
                                            :max-size="10240"
                                            multiple
                                            type="drag"
                                            :action="fileUrl">
                                        <div style="padding: 10px">
                                            <Icon type="ios-cloud-upload" size="45" style="color: #3399ff"></Icon>
                                            <p>点击将文件拖拽到这里上传</p>
                                            <span style="font-size:8px;color: #797a64">支持扩展名：.rar .zip .doc .docx .pdf...</span>
                                        </div>
                                    </Upload>
                                </div>
                                <div v-show="uploadList.length>0" v-for="item in uploadList" :key='item'>
                                    <a @click="downloadFile(InputData.perfId,item)">{{ item.fileName }}</a>
                                    <Button type="text" icon="md-trash" @click="remove1(item.id)"
                                            style="margin-left: 5px;margin-bottom: 3px"/>
                                </div>
                            </FormItem>
                        </Col>
                    </Row>
                </Form>
                <Modal title="相关方作业信息" :transfer=false footer-hide v-model="modelSearch" :width=900>
                    <working-related-parties v-if="modelSearch" v-show="modelSearch" :modelSearch="modelSearch"
                                             @getSelectModelData='danxuan' :companyId="companyId"></working-related-parties>
                    <div slot="footer">
                        <Button class='ivu-btn-save' @click="onCancel">关闭</Button>
                    </div>
                </Modal>
            </div>
            <div slot="footer">
                <Button class='ivu-btn-save' :loading="buttonLoading" @click="submit('InputData')">确定</Button>
                <Button class='ivu-btn-cancel' @click="onCancel">取消</Button>
            </div>
        </Modal>


        <Modal :transfer=false v-model="model3" :width=700 title="相关方业绩评价"
               @on-cancel="onCancel">
            <Form style="margin-left: 10px" :model="InputData" >
                <Row style="line-height: 42px;">
                    <Col span='11'>
                        <span>作业名称：{{InputData.serviceName}}</span>
                    </Col>
                    <Col span='11' offset="1">
                        <span>相关方名称：{{InputData.contractorName}}</span>
                    </Col>
                </Row>
                <Row class="detail-background-clor" style="line-height: 42px;">
                    <Col span='11'>
                        <span>联系人：{{InputData.contacts}}</span>
                    </Col>
                    <Col span='11' offset="1">
                        <span>联系电话：{{InputData.phone}}</span>
                    </Col>

                </Row>
                <Row style="line-height: 42px;">

                    <Col span='11'>
                        <span>评价时间段：{{evaluationPeriodDate1}}</span>
                    </Col>
                   <!-- <Col span='11' offset="1">
                        <span>合同有效期：{{contractTermDate1}}</span>
                    </Col>
                </Row>
                <Row class="detail-background-clor" style="line-height: 42px;">
                    <Col span='11'>
                        <span>供方资质：{{InputData.supplierQualification}}</span>
                    </Col> -->
                    <Col span='11' offset="1">
                        <span>评价人：{{InputData.userName}}</span>
                    </Col>
                </Row>
                <Row class="detail-background-clor" style="line-height: 42px;">
                    <Col span='11'>
                        <span>部门经理：{{InputData.departmentManagerUserName}}</span>
                    </Col>
                    <Col span='11' offset="1">
                        <span>主管经理：{{InputData.executiveManagerUserName}}</span>
                    </Col>
                </Row>
                <Row style="line-height: 42px;">
                    <Col span='11'>
                        <span>公司经理：{{InputData.companyManagerUserName}}</span>
                    </Col>
                    <Col span='11' offset="1">
                        <span>评价等级：{{InputData.evaluationGrade}}</span>
                    </Col>
                </Row>
                <Row class="detail-background-clor" style="line-height: 42px;">
                    <Col span='23'>
                        <FormItem label='综合评价：' prop="comprehensiveEvaluation">
                            {{InputData.comprehensiveEvaluation}}
                        </FormItem>
                    </Col>
                </Row>

                <Row style="line-height: 42px;">
                    <Col span="23">
                        <FormItem label="协议附件：">
                            <div v-show="uploadList.length>0" v-for="item in uploadList" :key='item'>
                                <a @click="downloadFile(InputData.perfId,item)">{{ item.fileName }}</a>
                            </div>
                        </FormItem>
                    </Col>
                </Row>
            </Form>
            <div slot="footer">
                <Button class='ivu-btn-save' @click="onCancel">关闭</Button>
            </div>
        </Modal>
        <Modal :transfer=false v-model="model4"  :width=900>
            <Tabs>
                <TabPane label="历史记录">
                    <Table ref='table1' border :columns="columns3" no-data-text="没有查询到相关数据！" style="margin-top: 0" :loading="loading2"
                           :data="history" width="100%"  :height="450" highlight-row stripe size="small"></Table>
                </TabPane>
                <TabPane label="流程图">
                    <div style="height: 450px; overflow-y: auto; overflow-x: auto">
                        <img :src="imgUrl" >
                    </div>
                </TabPane>
            </Tabs>
            <div slot="footer">
                <Button @click="model4=false" class="ivu-btn-save">关闭</Button>
            </div>
        </Modal>
    </Layout>
</template>

<script>
    import {Api} from '../../../api/index.js'
    import {sessionStorage} from '../../../common/cacheUtils.js';
    import cascaderDom from '../../../components/cascader-dom.vue';
    import userDom from "@/components/input-user.vue";
    import workingRelatedParties from './workingRelatedParties.vue'

    export default {
      name: "interestedPartiesSecurityProtocol",
      components: {cascaderDom, workingRelatedParties, userDom},
      data() {
        return {
            switchFlag:false,
          history: [],
          domCompanyName: sessionStorage('userId').getObject('userId').companyName,
          exportUrl: Api.interestedPartiesEvaluatePrefList + '/export',
          loading2: false,
          model4: false,
          loading1: false,
          options1: [],
          tableHeight: '', loading: false,
          form1: {
            agreementName: '',
            contractorName: '',
            orgId: '',
            orgName: ''
                },
                pageSizeArray: [10, 20, 50],
                pagedata: {
                    total: 0,
                    pageSize: 10,
                    currentPage: 1,
                },
                imgUrl:'',
                columns3: [
                    {
                        type: 'index',
                        title: '序号',
                        width: 80,
                        align: 'center',
                    },
                    {
                        width: 180,
                        title: '审批时间',
                        key: 'endTime',
                        align: 'center',
                    },
                    {
                        width: 185,
                        title: '节点名称',
                        key: 'name',
                        align: 'center',
                    },
                    {
                        width: 120,
                        title: '审批人',
                        key: 'userName',
                        align: 'center'
                    },
                    {
                        width: 100,
                        title: '审批意见',
                        key: 'route',
                        align: 'center'
                    },
                    {
                        width: 200,
                        title: '备注',
                        key: 'opinions',
                        align: 'center'
                    },
                ],
                dataTable: [],
                ruleCustom: {
                    evaluationGrade: [{
                        message: '  ',
                        required: true,
                        trigger: 'blue'
                    }],
                    serviceName: [{
                        message: '  ',
                        required: true,
                        trigger: 'blue'
                    }],
                    contacts: [{
                        message: '  ',
                        required: true,
                        trigger: 'blur'
                    }],
                    contractorName: [{
                        message: '  ',
                        required: true,
                        trigger: 'change'
                    }],
                    phone: [{
                        validator: (rule, value, callback) => {
                            if (!(/^1[3456789]\d{9}$/.test(value))) {
                                callback(' ');
                                this.$Message.error("请填写有效的的手机号")
                            } else {
                                callback()
                            }
                        },
                        required: true,
                        trigger: 'blur'
                    }],
                    evaluationPeriodDate: [{
                        validator: (rule, value, callback) => {
                            if (this.evaluationPeriodDate == null || this.evaluationPeriodDate[0] == null) {
                                callback(' ')
                            } else {
                                callback()
                            }
                        },
                        required: true,
                        trigger: 'change'
                    }],
                    departmentManagerUserId: [{
                        validator: (rule, value, callback) => {
                            if (this.InputData.departmentManagerUserId == null || this.InputData.departmentManagerUserId  == '' || this.InputData.departmentManagerUserId == undefined) {
                                callback(' ')
                            } else {
                                callback()
                            }
                        },
                        required: true,
                        trigger: 'change'
                    }],
                    executiveManagerUserId: [{
                        validator: (rule, value, callback) => {
                            if (this.InputData.executiveManagerUserId == null || this.InputData.executiveManagerUserId  == '' || this.InputData.executiveManagerUserId == undefined) {
                                callback(' ')
                            } else {
                                callback()
                            }
                        },
                        required: true,
                        trigger: 'change'
                    }],
                    companyManagerUserId: [{
                        validator: (rule, value, callback) => {
                            if (this.InputData.companyManagerUserId == null || this.InputData.companyManagerUserId  == '' || this.InputData.companyManagerUserId == undefined) {
                                callback(' ')
                            } else {
                                callback()
                            }
                        },
                        required: true,
                        trigger: 'change'
                    }],
                    managementEvaluation: [{
                        message: '  ',
                        required: true,
                        trigger: 'blur'
                    }],
                    performanceEvaluation: [{
                        message: '  ',
                        required: true,
                        trigger: 'blur'
                    }],
                    afterSaleEvaluation: [{
                        message: '  ',
                        required: true,
                        trigger: 'blur'
                    }],
                    comprehensiveEvaluation: [{
                        message: '  ',
                        required: true,
                        trigger: 'blur'
                    }],
                },
                columns1: [
                    {
                        title: "序号",
                        width: 80,
                        align: "center",
                        fixed: 'left',
                        render: (h, params) => {
                            return h('span', params.index + (this.pagedata.currentPage - 1) * this.pagedata.pageSize + 1);
                        }
                    },
                    {
                        title: '状态',
                        align: 'center',
                        key: 'status',
                        minWidth: 100,
                        render: (h, params) => {
                            let color = 'green';
                            if (params.row.procinstState == undefined || params.row.procinstState == null || params.row.procinstState == 2) {
                                color = 'red';
                            }
                            return h('div', [
                                h('span', {
                                    style: {
                                        color: color
                                    }
                                }, params.row.procinstState == 1 ? '审批中' : params.row.procinstState == 2 ? '被退回' : params.row.procinstState == 3 ? '审批通过' : '未上报' || '--')
                            ]);
                        }
                    },
                    {minWidth: 150, title: '作业名称', align: 'center', key: 'serviceName',tooltip:true},
                    {minWidth: 150, title: '相关方名称', align: 'center', key: 'contractorName',},
                    {minWidth: 150, title: '所属单位', align: 'center', key: 'companyName',},
                    {minWidth: 100, title: '联系人', align: 'center', key: 'contacts',},
                    {width: 160, title: '联系电话', align: 'center', key: 'phone',},
                    // {width: 200, minWidth: 150, title: '供方资质', align: 'center', key: 'supplierQualification',},
                    // {minWidth: 300, title: '合同有效期', align: 'center', key: 'contractTermDate',
                    //     render: (h, params) => {
                    //         let contractTermDateStart = new Date(params.row.contractTermStart);
                    //         let contractTermDateEnd = new Date(params.row.contractTermEnd);
                    //         return h('span', contractTermDateStart.getFullYear() + '/' + (contractTermDateStart.getMonth() + 1) + '/' + contractTermDateStart.getDate() + ' ~ ' +
                    //             contractTermDateEnd.getFullYear() + '/' + (contractTermDateEnd.getMonth() + 1) + '/' + contractTermDateEnd.getDate())
                    //     }
                    // },
                    {minWidth: 300, title: '评价时间段', align: 'center', key: 'contractTermDate',
                        render: (h, params) => {
                            let contractTermDateStart = new Date(params.row.evaluationPeriodStart);
                            let contractTermDateEnd = new Date(params.row.evaluationPeriodEnd);
                            return h('span', contractTermDateStart.getFullYear() + '/' + (contractTermDateStart.getMonth() + 1) + '/' + contractTermDateStart.getDate() + ' ~ ' +
                                contractTermDateEnd.getFullYear() + '/' + (contractTermDateEnd.getMonth() + 1) + '/' + contractTermDateEnd.getDate())
                        }
                    },
                    {minWidth: 80, title: '评价人', align: 'center', key: 'userName',},
										 {minWidth: 100, title: '评价等级', align: 'center', key: 'evaluationGrade',},
                    {
                        title: '操作',
                        key: 'action',
                        fixed: 'right',
                        minWidth: 200,
                        align: 'center',
                        render: (h, params) => {
                            return h('div', [
                                h('A', {
                                    props: {
                                        type: 'primary',
                                        size: 'small'
                                    },
                                    style: {
                                        fontSize: '14px',
                                    },
                                    on: {
                                        click: () => {
                                            let contractTermStart = new Date(params.row.contractTermStart);
                                            contractTermStart = contractTermStart.getFullYear() + '-' + (contractTermStart.getMonth() + 1) + '-' + contractTermStart.getDate()
                                            let contractTermEnd = new Date(params.row.contractTermEnd);
                                            contractTermEnd = contractTermEnd.getFullYear() + '-' + (contractTermEnd.getMonth() + 1) + '-' + contractTermEnd.getDate()
                                            this.contractTermDate1 = contractTermStart + '至' + contractTermEnd

                                            let evaluationPeriodStart = new Date(params.row.evaluationPeriodStart);
                                            evaluationPeriodStart = evaluationPeriodStart.getFullYear() + '-' + (evaluationPeriodStart.getMonth() + 1) + '-' + evaluationPeriodStart.getDate()
                                            let evaluationPeriodEnd = new Date(params.row.evaluationPeriodEnd);
                                            evaluationPeriodEnd = evaluationPeriodEnd.getFullYear() + '-' + (evaluationPeriodEnd.getMonth() + 1) + '-' + evaluationPeriodEnd.getDate()
                                            this.evaluationPeriodDate1 = evaluationPeriodStart + '至' + evaluationPeriodEnd
                                            this.InputData = params.row;
                                            this.model3 = true;

                                            this.getFiles()
                                        }
                                    }
                                }, '详情'),
                                h('Divider', {
                                    props: {
                                        type: 'vertical',
                                    }
                                }, ''),
                                h('A', {
                                    props: {
                                        type: 'primary',
                                        size: 'small'
                                    },
                                    style: {
                                        fontSize: '14px',
                                      color: params.row.procinstState == "1" || params.row.procinstState == "2" || params.row.procinstState == "3" ? '#d0d0d0' : params.row.createUserId == sessionStorage('userId').getObject('userId').userId ||  this.Common.userIdList.includes(sessionStorage('userId').getObject('userId').userId)||sessionStorage('userId').getObject('userId').userRole.find(obj => obj.roleId == '73b38b37dff64392ba0ee7dd579bf293') != undefined ? '':'#d0d0d0',
                                      pointerEvents: params.row.procinstState == "1" || params.row.procinstState == "2" || params.row.procinstState == "3" ? 'none' : params.row.createUserId == sessionStorage('userId').getObject('userId').userId ||  this.Common.userIdList.includes(sessionStorage('userId').getObject('userId').userId) ||sessionStorage('userId').getObject('userId').userRole.find(obj => obj.roleId == '73b38b37dff64392ba0ee7dd579bf293') != undefined ? '' : 'none'
                                    },
                                    on: {
                                        click: () => {

                                          this.contractTermDate = [new Date(params.row.contractTermStart), new Date(params.row.contractTermEnd)]
                                          this.evaluationPeriodDate = [new Date(params.row.evaluationPeriodStart), new Date(params.row.evaluationPeriodEnd)]
                                          this.InputData = JSON.parse(JSON.stringify(params.row));
                                          setTimeout(() => {
                                            this.$refs.evaluator.setCurrentInfo();
                                            this.$refs.departmentManagerUserId.setCurrentInfo();
                                            this.$refs.executiveManagerUserId.setCurrentInfo();
                                            this.$refs.companyManagerUserId.setCurrentInfo();
                                          }, 300);
                                          this.model1 = true;
                                          this.add = false;
                                          this.getFiles()
                                        }
                                    }
                                }, '修改'),
                                h('Divider', {
                                    props: {
                                        type: 'vertical',
                                    }
                                }, ''),
                                h('A', {
                                    props: {
                                        type: 'primary',
                                        size: 'small'
                                    },
                                    style: {
                                        fontSize: '14px',
                                      color: params.row.procinstState == "1" || params.row.procinstState == "2" || params.row.procinstState == "3" ? '#d0d0d0' : params.row.createUserId == sessionStorage('userId').getObject('userId').userId ||  this.Common.userIdList.includes(sessionStorage('userId').getObject('userId').userId)||sessionStorage('userId').getObject('userId').userRole.find(obj => obj.roleId == '73b38b37dff64392ba0ee7dd579bf293') != undefined ? '':'#d0d0d0',
                                      pointerEvents: params.row.procinstState == "1" || params.row.procinstState == "2" || params.row.procinstState == "3" ? 'none' : params.row.createUserId == sessionStorage('userId').getObject('userId').userId ||  this.Common.userIdList.includes(sessionStorage('userId').getObject('userId').userId) ||sessionStorage('userId').getObject('userId').userRole.find(obj => obj.roleId == '73b38b37dff64392ba0ee7dd579bf293') != undefined ? '' : 'none'
                                        // color: params.row.isSubmit == "1" ? '#d0d0d0' : '',
                                        // pointerEvents: params.row.isSubmit == "1" ? 'none' : ''
                                    },
                                    on: {
                                        click: () => {
                                          this.$Modal.confirm({
                                            title: '提示',
                                            content: '<p>是否要提交？</p>',
                                            onOk: () =>{
                                              this.submitActivity(params);
                                            } ,
                                            onCancel: () => {
                                            }
                                          });

                                        }
                                    }
                                }, "提交"),
                                h('Divider', {
                                    props: {
                                        type: 'vertical',
                                    }
                                }, ''),
                                h('A', {
                                    props: {
                                        type: 'error',
                                        size: 'small'
                                    },
                                    style: {
                                        fontSize: '14px',
                                      color: params.row.procinstState == "1" || params.row.procinstState == "2" || params.row.procinstState == "3" ? '#d0d0d0' : params.row.createUserId == sessionStorage('userId').getObject('userId').userId ||  this.Common.userIdList.includes(sessionStorage('userId').getObject('userId').userId)||sessionStorage('userId').getObject('userId').userRole.find(obj => obj.roleId == '73b38b37dff64392ba0ee7dd579bf293') != undefined ? 'red':'#d0d0d0',
                                      pointerEvents: params.row.procinstState == "1" || params.row.procinstState == "2" || params.row.procinstState == "3" ? 'none' : params.row.createUserId == sessionStorage('userId').getObject('userId').userId ||  this.Common.userIdList.includes(sessionStorage('userId').getObject('userId').userId) ||sessionStorage('userId').getObject('userId').userRole.find(obj => obj.roleId == '73b38b37dff64392ba0ee7dd579bf293') != undefined ? '' : 'none'
                                        // color: params.row.isSubmit == "1" ? '#d0d0d0' : 'red',
                                        // pointerEvents: params.row.isSubmit == "1" ? 'none' : ''
                                    },
                                    on: {
                                        click: () => {
                                          this.$Modal.confirm({
                                            title: '提示',
                                            content: '<p>是否要删除？</p>',
                                            onOk: () =>{
                                              this.deleteData(params.row);
                                            } ,
                                            onCancel: () => {
                                            }
                                          });

                                        }
                                    }
                                }, '删除'),
                                h('Divider', {
                                    props: {
                                        type: 'vertical',
                                    }
                                }, ''),
                                h('a', {
                                    props: {
                                        type: 'primary',
                                    },
                                    style: {
                                        fontSize: '14px',
                                        color: params.row.procinstId == null ? '#d0d0d0' : '',
                                        pointerEvents: params.row.procinstId == null ? 'none' : ''
                                    },
                                    on: {
                                        click: () => {
                                            this.imgUrl = Api.getFlowImg + '/' + params.row.procinstId
                                            this.showHistory(params.row);
                                        }
                                    }
                                },'审批记录')
                            ]);
                        }
                    }
                ],
                add: false,
                model1: false,
                model3: false,
                contractTermDate1: '',
                evaluationPeriodDate1: '',
                evaluationPeriodDate: [null, null],
                fileUrl: Api.interestedPartiesUserFile,
                contractTermDate: [null, null],
                InputData: {},
                buttonLoading: false,
                uploadList: [],

                companyId: '',
                modelSearch:false
            }
        },
        mounted() {
            this.companyId = sessionStorage('userId').getObject('userId').companyId
            this.tableHeight = window.innerHeight - this.$refs.table.$el.offsetTop - 145;
            this.query()
        },
        methods: {
            switchQuery(flag) {
                this.switchFlag = flag;
                if (!this.switchFlag) {
                    this.tableHeight = this.tableHeight + 44;
                } else {
                    this.tableHeight = this.tableHeight - 44;
                }
            },
          setUserInfo(data) {
            this.InputData.evaluator = data.userId;
            this.InputData.userName = data.userName;
          },
          setDepartmentManagerUser(data) {
            this.InputData.departmentManagerUserId = data.userId;
            this.InputData.departmentManagerUserName = data.userName;
          },
          setExecutiveManagerUser(data) {
            this.InputData.executiveManagerUserId = data.userId;
            this.InputData.executiveManagerUserName = data.userName;
          },
          setCompanyManagerUser(data) {
            this.InputData.companyManagerUserId = data.userId;
            this.InputData.companyManagerUserName = data.userName;
          },
          showHistory(row) {
            this.model4 = true;
            this.loading2 = true;
            this.$http.get(Api.getHistory + '/' + row.procinstId, {params: {}}).then((res) => {
              this.history = res.data;
              this.loading2 = false;
            }).catch(e => {
              this.$Message.error("数据获取失败")
            })
          },
            danxuan(row) {
                this.modelSearch = false;
                this.InputData.contractorName = row.relatedPartiesName//相关方名称
                this.InputData.serviceName = row.workingMatters//作业事项
                this.InputData.workingRelatedId = row.id//相关方作业id
            },
            setEvaluatorId(item) {
                this.InputData.userName = item.label;
                this.InputData.evaluator = item.value;
            },


            setUserId1(item) {
                this.InputData.departmentManagerUserName = item.label;
                this.InputData.departmentManagerUserId = item.value;

            },


            setUserId2(item) {
                this.InputData.executiveManagerUserName = item.label;
                this.InputData.executiveManagerUserId = item.value;
            },


            setUserId3(item) {
                this.InputData.companyManagerUserName = item.label;
                this.InputData.companyManagerUserId = item.value;
            },

            remoteMethod1(query) {
                if (query !== '') {
                    clearTimeout(this.remoteMethod1.timer);
                    this.remoteMethod1.timer = setTimeout(() => {
                        this.options1.splice(0, this.options1.length);
                        this.loading1 = true;
                        let data = {
                            userName: query,
                            orgId: sessionStorage('userId').getObject('userId').companyId
                        };
                        this.$http.get(Api.queryUserByUserName, {params: data}).then((res) => {
                            this.loading1 = false;
                            res.data.data.forEach(item => {
                                this.options1.push(item);
                            })

                        }).catch(e => {
                            this.loading1 = false;
                        })
                    }, 200);
                } else {
                    this.options1 = [];
                }
            },
            submitActivity(data) {

                  this.loading = true;
                  var params = {};
                  params.key = "evaluationPerf"
                  params.formKey = "evaluationPerfForApproval";
                  params.workId = data.row.perfId
                  params.createUserId = data.row.evaluator;
                  params.userName = data.row.userName;
                  params.user1 = data.row.departmentManagerUserId;
                  params.user2 = data.row.executiveManagerUserId;
                  params.user3 = data.row.companyManagerUserId;
                  if (data.row.procinstState === '2') {
                      let data = {};
                      data = {
                          createUserId: sessionStorage('userId').getObject('userId').userId,
                          userName: sessionStorage('userId').getObject('userId').userName,
                          opinion: this.showdata.opinion,
                          taskId: this.$route.params.taskId,
                          procinstId: this.$route.params.procinstId,
                          route: this.showdata.route
                      };

                      this.$http.get(Api.taskComplete, {params: data}).then((res) => {
                          console.log(res)
                          if (res.data.status == '200') {
                              this.loading = false;
                              this.$Message.success("审批成功")
                              this.handleCancel();
                          } else {
                              this.loading = false;
                              this.$Message.success("审批失败")
                          }
                      }).catch(e => {
                          this.loading = false;
                          this.$Message.error("数据获取失败")
                      })

                  } else {
                      this.$http.post(Api.submit, params).then((res) => {
                          this.loading = false;
                          if (res.data.status == 200) {
                              this.$Message.success('成功');
                          }
                          this.query();
                      }).catch(e => {

                          this.query();
                          this.loading = false;
                          this.$Message.error("数据获取失败")
                      })

                  }


            },

            downloadFile(perfId, file) {
                let url = this.fileUrl + '/file/' + file.id;
                this.$http.get(url, {
                    responseType: 'blob'      //告诉服务器我们需要的响应格式
                }).then((res) => {
                    console.log(res)
                    const aLink = document.createElement("a");
                    let blob = new Blob([res.data], {
                        type: res.bodyBlob.type      //将会被放入到blob中的数组内容的MIME类型
                    });
                    aLink.href = URL.createObjectURL(blob)
                    aLink.download = file.fileName //标题
                    aLink.click()
                    document.body.appendChild(aLink)
                })
            },
            remove1(id) {
                console.log(id)
                let url = this.fileUrl + '/file/' + id;
                this.$http.delete(url).then((res) => {
                    this.getFiles()
                })
            },
            beforeUpload(file) {
                console.log(this.uploadList)
                let formData = new FormData();
                formData.append("files", file); // 文件对象
                let url = this.fileUrl + '/' + this.InputData.perfId + '/files/agreementFile'
                this.$http.post(url, formData).then((res) => {
                    if (res.data.result == "success") {
                        this.$Message.info("文件上传成功")
                        this.getFiles();
                    }
                })
                return false
            },
            getFiles() {
                let url = this.fileUrl + '/' + this.InputData.perfId + '/files/agreementFile'
                this.$http.get(url).then((res) => {
                    if (res.data.result == "success") {
                        console.log(res.data)
                        this.uploadList = res.data.data
                    }
                })
            },

            onCancel() {
                this.contractTermDate = [null, null]
                this.evaluationPeriodDate = [null, null]
                this.InputData = {}
                this.model1 = false
                this.model3 = false
                this.uploadList = []
                this.query()
            },
            submit(name) {
                this.$refs[name].validate((valid) => {
                    if (valid) {
                        console.log(this.InputData.departmentManagerUserId);
                        console.log(this.InputData.departmentManagerUserName);

                        this.buttonLoading = true
                        this.InputData.contractTermStart = this.contractTermDate[0]
                        this.InputData.contractTermEnd = this.contractTermDate[1]
                        this.InputData.evaluationPeriodStart = this.evaluationPeriodDate[0]
                        this.InputData.evaluationPeriodEnd = this.evaluationPeriodDate[1]
                        if (this.add) {
                            let url = Api.interestedPartiesEvaluatePrefSave
                            this.InputData.bsflag = '0'
                            this.InputData.createOrgId = sessionStorage('userId').getObject('userId').orgInfo.orgId
                            this.InputData.createUserId = sessionStorage('userId').getObject('userId').userId
                            this.$http.post(url, this.InputData).then((res) => {
                                this.$Message.success('成功');
                                // this.uploadFile();
                                this.buttonLoading = false
                                this.model1 = false
                                this.query()
                            }).catch(e => {
                                this.$Message.error('请求失败');
                            })
                        } else {
                            let url = Api.interestedPartiesEvaluatePrefUpdate;
                            this.InputData.updateUserId = sessionStorage('userId').getObject('userId').userId
                            this.InputData.updateOrgId = sessionStorage('userId').getObject('userId').orgInfo.orgId
                            this.$http.post(url, this.InputData).then((res) => {
                                this.$Message.success('成功');
                                // this.uploadFile();
                                this.buttonLoading = false
                                this.model1 = false
                                this.query()
                            }).catch(e => {
                                this.$Message.error('请求失败');
                            })
                        }
                    } else {
                        this.$Message.error('失败!');
                    }
                })

            },

            deleteData(row) {
                let url = Api.interestedPartiesEvaluatePrefDelete + '/' + row.perfId;
                this.$http.delete(url).then((res) => {
                    this.$Message.success('成功');
                    this.query()
                }).catch(e => {
                    this.$Message.error("数据获取失败")
                })
            },
            addInfo() {
              this.uploadList = [];
                this.contractTermDate = [null, null]
                this.evaluationPeriodDate = [null, null]
                this.options1.push({
                    userId: sessionStorage('userId').getObject('userId').userId,
                  userName: sessionStorage('userId').getObject('userId').userName,
                  orgInfo: {orgName: sessionStorage('userId').getObject('userId').orgInfo.orgName}
                });
              this.add = true;
              this.InputData = {
                perfId: this.get_uuid(),
                evaluator: sessionStorage('userId').getObject('userId').userId,
                userName: sessionStorage('userId').getObject('userId').userName,

              };

              setTimeout(() => {
                this.$refs.evaluator.setCurrentInfo();
                this.$refs.departmentManagerUserId.setCurrentInfo();
                this.$refs.executiveManagerUserId.setCurrentInfo();
                this.$refs.companyManagerUserId.setCurrentInfo();
              }, 300);


              this.model1 = true;
            },
            query() {
                this.loading = true;
                let data = {
                    startPage: this.pagedata.currentPage,
                    size: this.pagedata.pageSize
                }
                if (this.form1.orgId == '') {
                    this.form1.orgId = this.companyId
                }
                data = Object.assign(data, JSON.parse(JSON.stringify(this.form1)));
                let url = Api.interestedPartiesEvaluatePrefList
                this.$http.get(url, {params: data}).then((res) => {
                    console.log(res.data);
                    this.dataTable = res.data.data.data;
                    this.pagedata.total = res.data.data.totalSize;
                    this.loading = false;
                }).catch(e => {
                    this.$Message.error("数据获取失败")
                })
            },
            reset() {
                this.form1 = {
                    agreementName: '',
                    contractorName: '',
                    orgId: '',
                    orgName: ''
                }
                this.pagedata.currentPage = 1;
                this.$refs.childOrg && this.$refs.childOrg.resetCurrentOrg();
                this.query();
            },
            setOrgId(data) {
                this.form1.orgId = data[data.length - 1];
            },
            setOrgName(data) {
                this.form1.orgName = data;
            },
            pageChange(pageNum) {
                this.pagedata.currentPage = pageNum;
                this.query();
            },
            pageSizeChange(pageSize) {
                this.pagedata.pageSize = pageSize;
                this.query();
            },
            get_uuid() {
                let s = [];
                let hexDigits = "0123456789abcdef";
                for (let i = 0; i < 36; i++) {
                    s[i] = hexDigits.substr(Math.floor(Math.random() * 0x10), 1);
                }
                s[14] = "4";
                s[19] = hexDigits.substr((s[19] & 0x3) | 0x8, 1);
                s[8] = s[13] = s[18] = s[23] = "-";

                let uuid = s.join("");
                let reg = new RegExp("-", "g");
                let a = uuid.replace(reg, "");
                console.log(a);
                return a;
            },
        },
        watch: {
            "model1": function (qw, er) {
                if (qw && this.model1) {
                    setTimeout(() => {
                        this.$refs.childEvaluator.setCurrentOrg();
                        this.$refs.childUser1.setCurrentOrg();
                        this.$refs.childUser2.setCurrentOrg();
                        this.$refs.childUser3.setCurrentOrg();
                    }, 100)
                } else {
                    this.$refs.childEvaluator.resetCurrentOrg();
                    this.$refs.childUser1.resetCurrentOrg();
                    this.$refs.childUser2.resetCurrentOrg();
                    this.$refs.childUser3.resetCurrentOrg();
                }
            },
        },
    }
</script>

<style scoped>
    @import '../../../index.css';
</style>
